<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig"><span>产品分拣</span></div>
      <div class="liucheng">
        <el-steps :active="4" align-center>
          <el-step title="生产开工"></el-step>
          <el-step title="打印输出"></el-step>
          <el-step title="输出分拣"></el-step>
          <el-step title="产品分拣"></el-step>
          <el-step title="包装发货"></el-step>
        </el-steps>
      </div>
      <div class="btn">
        <el-button @click="empty" icon="el-icon-delete" type="primary">清空格子</el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">扫描外箱标签上的箱子条形码，系统按照设置好的分拣规则提示存放区域，作业员按照系统提示的储位号把产品放入即可。格子红色代表订单已满，请及时流向包装工位。<span
        class="skip">查看帮助文档</span></p>
    </div>
    <!-- 不会显示在界面的打印条码 -->
    <transition name="el-fade-in-linear">
      <div v-show="false">
        <form class="azure" ref="form1">
          <table border="1" style="border:solid 1px black;border-collapse:collapse;font-size:12px;text-align:center"
                 width="180">
            <tr>
              <td style="font-weight:800;width:60px">订单编码</td>
              <td>{{gridOfPrint.NetOrderId}}</td>
            </tr>
            <tr>
              <td style="font-weight:800">客户名称</td>
              <td>{{gridOfPrint.CtmName}}</td>
            </tr>
            <tr>
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">收货地址</td>
              <td>{{gridOfPrint.RecAddress}}</td>
            </tr>
            <tr>
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">产 品 数</td>
              <td>{{gridOfPrint.ProductNum}}</td>
            </tr>
            <tr :key="index" v-for="(item,index) in gridOfPrint.OrderProducts">
              <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">{{item.ProductName}}</td>
              <td>{{item.OrderProductCode}} —— {{item.PhotoNum}}</td>
            </tr>
            <!-- <tr>
            <td style="font-weight:800;word-wrap: break-word;word-break: break-all ;">爱丽丝细绒</td>
            <td>OP0000000085 —— 25</td>
            </tr> -->
          </table>
        </form>
      </div>
    </transition>
    <div class="main">
      <div class="left">
        <div class="scanning">
          <h4>扫描操作区</h4>
          <div class="center">
            <el-radio-group class="anniu" v-model="radio">
              <el-radio label="0">连续扫描</el-radio>
              <el-radio label="1">首尾扫描</el-radio>
            </el-radio-group>

            <!--<el-button @click="testPrint">testPrint</el-button>-->

            <div class="saomiao">
              <span>请扫描SN条码：</span>
              <el-input @keydown.native.enter="getProduct" clearable placeholder="请扫描SN条码带出产品信息"
                        v-model="saomiao"></el-input>
            </div>
            <div class="next">
              <span>下一道工序：</span>
              <el-button class="fahuo" type="primary"><span @click="$router.push({name:'shipments'})">包装发货</span>
              </el-button>
            </div>
            <div class="sort">
              <h5>分拣储位：</h5>
              <span>{{gridData.GridID}}</span>
            </div>
          </div>
        </div>
        <div class="inputcontent">
          <el-input class="inSearch" placeholder="请输入内容" v-model="search"></el-input>
          <div class="iconSearch"></div>
          <el-select @change="getStation" placeholder="请选择线体" v-model="lineId">
            <el-option
              :key="index"
              :label="item.LineId + '  ' + item.Name"
              :value="item.LineId"
              v-for="(item,index) in lineData"
            ></el-option>
          </el-select>
        </div>

        <div class="stationMes">
          <h4>工位信息展示</h4>
          <ul>
            <li>
              <h5>工位名称：</h5>
              <span>{{workStationData.Name}}</span>
            </li>
            <li>
              <h5>工位线体：</h5>
              <span>{{workStationData.LineName}}</span>
            </li>
            <li>
              <h5>所属车间：</h5>
              <span>{{workStationData.WorkShopName}}</span>
            </li>
            <li>
              <h5>操作员：</h5>
              <span>{{workStationData.LastModifyBy}}</span>
            </li>
          </ul>
        </div>


        <div :key="outerIndex" class="grid" v-for="(item,outerIndex) in gridAreaList">
          <el-card :body-style="{padding:'10px'}">
            <span class="express">{{item.GridAreaName}}</span>
            <!-- max-height-300 -->
            <show-more-content
              :fold-height="item.Grids ?  item.Grids.length<6 ? '160px':'310px' : '310px' "
              :key="key">
              <ul>

                <el-popover
                  :disabled="list.FullStatus!==2 && list.FullStatus!==2 "
                  :key="index"
                  @show="popperShow(list)" trigger="hover"
                  v-for="(list,index) in item.Grids">
                  <li slot="reference">

                    <div
                      @click="orderDetail(index)"
                      @mouseenter="enter(index,outerIndex)"
                      @mouseleave="leave(index)"
                      class="gezi"
                      style="background:#67C23A;color:#fff;cursor:pointer"
                      v-if="list.FullStatus==2">
                      <span class="gridname">{{list.GridName}}</span>
                      <span class="code">订单编码：{{list.NetOrderId}}</span>
                      <span class="code">客户名称：{{list.CtmName}}</span>
                      <span class="code">产品数：{{list.GridDetails.length}}/{{list.ProductNum}}</span>

                    </div>
                    <div
                      @mouseenter="enter1(index,outerIndex)"
                      @mouseleave="leave(index)"
                      class="gezi"
                      style="backgroundColor:#0095FF;color:#fff"
                      v-else-if="list.FullStatus==1">
                      <span class="gridname">{{list.GridName}}</span>
                      <span class="code">订单编码：{{list.NetOrderId}}</span>
                      <span class="code">客户名称：{{list.CtmName}}</span>
                      <span class="code">产品数：{{list.GridDetails.length}}/{{list.ProductNum}}</span>
                    </div>
                    <div
                      class="gezi"
                      style="backgroundColor:#fff;"
                      v-else
                    ><span class="gridname">{{list.GridName}}</span></div>
                  </li>

                  <!--  popper content-->
                  <!-- v-show="seen && index===current-1 && outerCurrentIndex===outerIndex"-->
                  <div class="popover">
                    <h5 style="margin:20px 0 10px 20px;">订单编码：<span>{{gridDetail.NetOrderId}}</span></h5>
                    <el-table :data="gridsData" border>
                      <el-table-column align="center" label="产品名称" prop="OrderProduct.Name"
                                       width="170"></el-table-column>
                      <el-table-column align="center" label="产品编码" prop="OrderProduct.OrderProductCode"
                                       width="150"></el-table-column>
                    </el-table>
                  </div>

                  <!--<div class="popover" v-show="seen1 && index===current-1 && outerCurrentIndex===outerIndex">-->
                  <!--<h5 style="margin:20px 0 10px 20px;">订单编码：<span>{{gridDetail.NetOrderId}}</span></h5>-->
                  <!--<el-table :data="gridsData" border>-->
                  <!--<el-table-column align="center" width="170" prop="OrderProduct.Name"-->
                  <!--label="产品名称"></el-table-column>-->
                  <!--<el-table-column align="center" width="150" prop="OrderProduct.OrderProductCode"-->
                  <!--label="产品编码"></el-table-column>-->
                  <!--</el-table>-->
                  <!--</div>-->

                </el-popover>

              </ul>
            </show-more-content>
          </el-card>
        </div>


      </div>
      <div class="right">
        <h4>异常SN</h4>
        <div>
          <Table2 :tableData2="tableData2"></Table2>
        </div>
        <h4>过站</h4>
        <div>
          <Table3 :tableData3="tableData3"></Table3>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal='false' :visible.sync="dialogVisible" center title="订单条码" width="450px">
      <div class="biaoge">
        <table class="biaotou">
          <tr>
            <td>订单编码</td>
          </tr>
          <tr>
            <td>客户名称</td>
          </tr>
          <tr>
            <td>收货地址</td>
          </tr>
          <tr>
            <td>产 品 数</td>
          </tr>
          <tr :key="index" v-for="(item,index) in gridssData.OrderProducts">
            <td style="width:100px">{{item.ProductName}}</td>
          </tr>

        </table>
        <table class="neirong">
          <tr>
            <td>{{gridssData.NetOrderId}}</td>
          </tr>
          <tr>
            <td>{{gridssData.CtmName}}</td>
          </tr>
          <tr>
            <td>{{gridssData.RecAddress}}</td>
          </tr>
          <tr>
            <td>{{gridssData.ProductNum}}</td>
          </tr>
          <tr :key="index" v-for="(item,index) in gridssData.OrderProducts">
            <td style="width:100px">{{item.OrderProductCode}} —— {{item.PhotoNum}}</td>
          </tr>
        </table>
      </div>
      <div class="tiaoxingma">
        <barcode :options="barcode_option" :value="barcodeValue"></barcode>
      </div>
      <el-button @click="printPdf" class="anniu1" style="marginTop:20px" type="primary"><span class="dayin">打 印</span>
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
  import { getLodop } from './assets/LodopFuncs'
  import {
    cleanGrid,
    getGridAreaList,
    getGridDetailByGridId,
    getGridDOfPrintInfoByGridId,
    getOrderBagOfFullBoard,
    scanGridProduct
  } from '@/api/sorting'
  import { getUserLineList } from '@/api/linebody'
  import { getWorkStationInfo } from '@/api/scan'
  import Table2 from './components/sortingTable2'
  import Table3 from './components/sortingTable3'
  import VueBarcode from 'vue-barcode'
  import ShowMoreContent from '@/components/ShowMore'
  import { printPdf } from '@/utils/commons'

  const heightMap = {}

  export default {
    name: 'sorting',
    components: {
      ShowMoreContent,
      // Table,
      Table2,
      'barcode': VueBarcode,
      Table3
    },
    data() {
      return {
        barcode_option: {
          displayValue: true,
          background: '#fff',
          fontSize: '24px'
        },

        seen: false,
        seen1: false,
        tableData2: [],
        tableData3: [],
        gridData: [],
        gridsData: [],
        gridsData1: [],
        gridssData: {},//打印详情
        codeArr: [], //条码数组
        // orderProductData:{},
        // gridList:[],
        gridAreaList: [], //格子区域列表
        key: -1, //格子区域列表
        gridDetail: [],  //格子详情

        gridOfPrint: {},//格子打印详情
        lineId: '',
        lineData: [],
        workStationData: [],
        radio: '0',
        saomiao: '',
        search: '',
        current: 0,
        outerCurrentIndex: -1,

        dialogVisible: false,
        barcodeValue: 0,

        showPopperFlag: ''
      }
    },
    mounted() {
      // this.init()
      this.getLine()
    },
    methods: {

      showMore(e, item) {
        const { GridAreaId } = item
        let el = e.target
        while (!el.className.includes('grid')) {
          el = el.parentNode
        }

        // const ele = el.querySelector('.expand-container')

        const $el = $(el.querySelector('.expand-container'))

        // window.azure = $el
        //   $el.addClass('ccc')

        $el.toggleClass('max-height-300')
        // if ($el.hasClass('expand-container')){
        //   console.log('has');
        //   $el.removeClass('expand-container')
        // } else{
        //   console.log('not has');
        //   $el.addClass('ccc')
        //   $el.addClass('expand-container')
        // }
        // console.log($el.attr());
        // $el.style()
        // if (GridAreaId in heightMap){
        //
        // } else{
        //   console.log($el.height());
        //   heightMap[GridAreaId] = $el.height()
        //
        // }

        // $el.animate({height:"300px"});
        // $(".btn1").click(function(){
        //   $("#box").animate({height:"300px"});
        // });

      },
      getStation() {
        //通过电脑IP地址获取当前工位信息
        getWorkStationInfo({
          // ipAddress: ipaddress,
          techType: 10,
          lineId: parseInt(this.lineId)
        }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.workStationData = res.Result
            this.printer = res.Result.PrinterName
            this.init()
          }
        })
      },
      getLine() {
        getUserLineList({ keyName: '', lineType: -1 }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.lineData = res.Result
          }
        })
      },
      printPdf() {
        if (this.lineId == '') {
          this.$message('请先选择线体再打印')

        } else {
          this.CreateOneFormPage()
          LODOP.PRINT()
          // LODOP.PREVIEW()
        }
      },

      testPrint() {
        console.log('333333333')
        const LODOP = getLodop()
        LODOP.SET_PRINT_PAGESIZE(2, '60mm', '90mm')
        LODOP.PRINT_INIT('订货单')
        LODOP.ADD_PRINT_RECT('1mm', '1mm', '60mm', '90mm', 0, 2)
        // LODOP.SET_PRINT_STYLE('FontSize', 12)
        // LODOP.SET_PRINT_STYLE('Bold', 1)
        LODOP.ADD_PRINT_TEXT(10, 20, 200, 20, '订单条码')
        // LODOP.ADD_PRINT_HTM(100, 0, 50, 400, this.$refs.form1.innerHTML)
        // LODOP.ADD_PRINT_BARCODE(35, 5, 180, 50, '128Auto', this.gridOfPrint.NetOrderId)

        // LODOP.SET_PRINTER_INDEX('OneNote')
        LODOP.SET_PRINTER_INDEX(this.printer)

        LODOP.PRINT()

      },
      CreateOneFormPage() {
        const LODOP = getLodop()
        LODOP.SET_PRINT_PAGESIZE(1, '60mm', '90mm')
        LODOP.PRINT_INIT('订货单')
        LODOP.SET_PRINT_STYLE('FontSize', 12)
        LODOP.SET_PRINT_STYLE('Bold', 1)
        LODOP.ADD_PRINT_TEXT(10, 20, 200, 20, '订单条码')
        LODOP.ADD_PRINT_HTM(100, 0, 50, 400, this.$refs.form1.innerHTML)
        LODOP.ADD_PRINT_BARCODE(35, 5, 180, 50, '128Auto', this.gridOfPrint.NetOrderId)
        LODOP.SET_PRINTER_INDEX(this.printer)
      },
      init() {
        // 获取区域格子列表
        // parseInt(this.lineId)
        getGridAreaList({
          shippingId: -1, keyName: this.search, status: -1
          , lineId: parseInt(this.lineId)
        }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.gridAreaList = res.Result
            this.key++
          }
        })
        getOrderBagOfFullBoard().then(res => {
          if (parseInt(res.Code) === 1) {
            this.tableData3 = res.Result
          }
        })
      },

      azurePrintPdf(content, { PrinterName } = {}) {
        if (!content) {
          this.$message.warning('打印流为空🎁🎞♾')
        }
        const LODOP = getLodop()
        LODOP['SET_PRINT_PAGESIZE'](1, '60mm', '90mm')
        LODOP['ADD_PRINT_PDF']('2mm', 0, '100%', '100%', content)
        LODOP['SET_PRINTER_INDEX'](PrinterName)
        LODOP.PRINT()
      },

      // 扫描产品条码获取sn过站信息
      getProduct() {
        if (this.workStationData == '') {
          this.$message('请选择线体')
          this.saomiao = ''

        } else {
          if (this.radio === '0') {
            if (!this.saomiao) {
              this.$message('SN条码不能为空')
            } else {
              scanGridProduct({
                lineId: parseInt(this.lineId),
                scanFlag: 0,
                productCodeStart: this.saomiao,
                productCodeEnd: this.saomiao
              }).then(res => {

                const { Result } = res
                if (Result && Result.ReportList) {
                  Result.ReportList.filter(v => v).forEach(({ Context, PrinterName }) => {
                    // console.log('ShippingNeedWeight => printPdf params => %o', Context, PrinterName)
                    printPdf(Context, PrinterName)
                  })
                }


                if (parseInt(res.Code) === 1) {
                  this.$message({
                    type: 'success',
                    message: res.Message
                  })
                  this.gridData = res.Result
                  const { NeedTicket, ReportBytes } = res.Result
                  // if (NeedTicket) {
                  //   this.azurePrintPdf(ReportBytes, { PrinterName: this.printer })

                  // }
                }
                this.saomiao = ''
                this.init()
                if (res.Result.FullStatus === 2) {
                  getGridDOfPrintInfoByGridId({ gridId: this.gridData.GridID }).then(res => {
                    if (parseInt(res.Code) === 1) {
                      this.gridOfPrint = res.Result
                      this.$nextTick(() => {
                        this.printPdf()
                      })
                    }
                  })
                }
              }).catch(res => {
                this.tableData2.push({ SN: this.saomiao, tips: res.Message })
                this.saomiao = ''
              })
            }
          } else {
            if (!this.saomiao) {
              this.$message('SN条码不能为空')

            } else {
              this.codeArr.push(this.saomiao + ' ')
              if (this.codeArr.length < 2) {
                this.$message('请扫描最后一个条码')
                this.saomiao = ''
              } else if (this.codeArr.length == 2) {
                scanGridProduct({
                  scanFlag: 1,
                  productCodeStart: this.codeArr[0],
                  productCodeEnd: this.codeArr[1],
                  lineId: parseInt(this.lineId)
                }).then(res => {

                  const { Result } = res
                  if (Result && Result.ReportList) {
                    Result.ReportList.filter(v => v).forEach(({ Context, PrinterName }) => {
                      // console.log('ShippingNeedWeight => printPdf params => %o', Context, PrinterName)
                      printPdf(Context, PrinterName)
                    })
                  }

                  if (parseInt(res.Code) === 1) {
                    this.$message({
                      type: 'success',
                      message: res.Message
                    })
                    this.gridData = res.Result

                    const { NeedTicket, ReportBytes } = res.Result
                    // if (NeedTicket) {
                    // this.azurePrintPdf(ReportBytes, { PrinterName: this.printer })
                    // }

                  }
                  this.saomiao = ''
                  this.codeArr = []
                  this.init()
                  if (res.Result.FullStatus === 2) {
                    getGridDOfPrintInfoByGridId({ gridId: this.gridData.GridID }).then(res => {
                      if (parseInt(res.Code) === 1) {
                        this.gridOfPrint = res.Result
                        this.$nextTick(() => {
                          this.printPdf()
                        })
                      }
                    })
                  }
                }).catch(res => {
                  this.tableData2.push({ SN: this.codeArr, tips: res.Message })
                  this.saomiao = ''
                  this.codeArr = []
                })
              } else {

              }
            }
          }
        }
      },
      //清空格子
      empty() {
        cleanGrid().then(res => {
          if (parseInt(res.Code) === 1) {
            this.$message({
              type: 'success',
              message: res.Message
            })
            this.init()
          }
        }).catch(res => {

        })
      },
      //点击清空
      qingkong(index) {
        this.$confirm('此操作将清空该格子, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.current = index + 1
          // cleanGrid({gridId:this.current}).then(res => {
          //     if(parseInt(res.Code) === 1){
          //         this.$message({
          //             type:'success',
          //             message:res.Message
          //         })
          //     }
          //     this.init()
          // }).catch(res =>{

          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清空'
          })
        })

      },

      popperShow(list) {
        //  明显的bug...,先移入格子A,再移到格子B,但是B的数据先响应了,随后A把B给覆盖了,
        //  但是当前鼠标格子还是在B上,却显示了A的数据
        console.log('~~~~~~~~~~popperShow')
        this.showPopperFlag = list.FullStatus
        getGridDetailByGridId({ gridId: this.current }).then(res => {
          if (parseInt(res.Code) === 1) {
            res.Result.forEach(el => {
              this.gridDetail = el.OrderBag
              // console.log(this.gridDetail)
            })
            this.gridsData = res.Result
            this.gridsData1 = this.gridsData[0]
          }
        })
      },
      // 鼠标移入格子 显示当前格子详情
      enter(index, outerIndex) {
        this.outerCurrentIndex = outerIndex
        this.current = index + 1
        this.seen = true
        getGridDetailByGridId({ gridId: this.current }).then(res => {
          if (parseInt(res.Code) === 1) {
            res.Result.forEach(el => {
              this.gridDetail = el.OrderBag
              // console.log(this.gridDetail)
            })
            this.gridsData = res.Result
            this.gridsData1 = this.gridsData[0]
          }
        }).catch(res => {

        })
      },
      // 鼠标移入格子 显示当前格子详情
      enter1(index, outerIndex) {
        this.outerCurrentIndex = outerIndex
        this.current = index + 1
        this.seen1 = true
        getGridDetailByGridId({ gridId: this.current }).then(res => {
          if (parseInt(res.Code) === 1) {
            res.Result.forEach(el => {
              this.gridDetail = el.OrderBag
              // console.log(this.gridDetail)
            })
            this.gridsData = res.Result
            this.gridsData1 = this.gridsData[0]
          }
        }).catch(res => {
        })
      },

      leave() {
        this.seen = false
        this.seen1 = false
      },
      orderDetail(index) {
        this.current = index + 1
        this.dialogVisible = true
        // this.barcodeValue = this.gridDetail.NetOrderId
        getGridDOfPrintInfoByGridId({ gridId: this.current }).then(res => {
          if (parseInt(res.Code) === 1) {
            this.gridssData = res.Result
            this.gridOfPrint = res.Result
            this.barcodeValue = this.gridssData.NetOrderId
          }
        })
      },
      addclassStatus(i) {
        switch (i) {
          case 0:
            return 'statusTypeSkinA'  //空闲
          case 1:
            return 'statusTypeSkinB'  //使用中
          case 2:
            return 'statusTypeSkinC'  //满载
        }
      },
      print() {
        this._print()
      },
      _print() {
        const routeData = this.$router.resolve({
          name: 'printOrderCode',
          query: {
            barcodeValue: this.barcodeValue,

            netOrderId: this.gridDetail.NetOrderId,
            name: this.gridDetail.Name,
            recAddress: this.gridDetail.RecAddress,
            gridsDataLength: this.gridsData.length,
            gridsData: JSON.stringify(this.gridsData)
          }
        })
        window.open(routeData.href, '_blank')
      },
      handleStatus() {
        // console.log(this.Ids)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .topBtn {
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 28px;
    display: flex;
    justify-content: space-between;

    .sizeBig {
      font-size: 16px;
      line-height: 60px;
      margin-left: 10px;
    }

    .liucheng {
      width: 600px;
      line-height: 28px;
    }

    .btn {
      line-height: 60px;
    }
  }

  .message {
    width: 98%;
    margin: 0 auto;
    height: 80px;
    line-height: 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    font-size: 14px;

    .character {
      margin: 20px 0 21px 20px;
      color: #999999;

      .skip {
        color: #0095FF;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }

  .main {
    width: 98%;
    margin: 0 auto;
    margin-top: 20px;

    .left {
      float: left;
      width: 68%;

      .scanning {
        width: 100%;
        height: 104px;
        border: 1px solid #eee;

        h4 {
          font-size: 14px;
          font-weight: 600;
          padding: 17px 0 0 22px;
          height: 50px;
        }

        .center {
          width: 100%;
          // margin-left: 1.8%;
          .anniu {
            float: left;
            width: 6%;
            margin-left: 1.8%;

            .el-radio {
              margin-bottom: 5px;
            }
          }

          .saomiao {
            float: left;
            width: 40%;
            height: 40px;
            line-height: 40px;
            margin-left: 7%;

            span {
              width: 110px;
              font-size: 14px;
              float: left;
            }

            .el-input {
              float: left;
              width: 58%;
            }
          }

          .next {
            float: left;
            width: 24%;
            margin-left: 4%;
            height: 40px;
            line-height: 40px;

            span {
              width: 51%;
              font-size: 14px;
              font-weight: 400;
            }

            .el-button {
              width: 49%;

              span {
                margin-left: -5px;
              }
            }
          }

          .sort {
            float: right;
            width: 13%;
            margin-right: 1.8%;
            height: 40px;
            line-height: 40px;
            // border: 1px solid #eee;
            h5 {
              width: 73%;
              float: left;
              font-size: 14px;
              font-weight: 400;
            }

            span {
              width: 27%;
              color: #F1022F;
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
      }

      .inputcontent {
        width: 100%;
        margin: 0 auto;
        height: 80px;
        position: relative;
        padding-top: 21px;
        box-sizing: border-box;

        .iconSearch {
          position: absolute;
          left: 277px;
          top: 30px;
          width: 20px;
          height: 20px;
          background-image: url('./image/搜索.png');
          background-repeat: no-repeat;
          cursor: pointer;
        }

        .inSearch {
          width: 308px;
          height: 40px;
        }
      }

      .stationMes {
        width: 100%;
        height: 90px;
        border: 1px solid #eee;

        h4 {
          font-size: 14px;
          margin: 17px 0 0 20px;
        }

        ul {
          transition: max-height .3s linear;
          margin-left: 20px;
          //@include clearfix;

          li {
            float: left;
            width: 23%;
            margin-top: 20px;
            margin-left: 10px;

            h5 {
              float: left;
              font-size: 14px;
              font-weight: 400;
            }

            span {
              float: left;
              font-size: 14px;
              font-weight: 400;
            }
          }
        }
      }

      .grid {
        width: 100%;
        /*margin: 0 auto;*/
        margin-top: 20px;
        /*margin-bottom: 60px;*/
        //@include clearfix;

        .max-height-300 {
          max-height: 300px;
        }

        .express {
          font-size: 16px;
          font-weight: 600;
          margin-left: 10px;
          margin-top: 10px;
        }

        ul {
          /*overflow-y: hidden;*/
          /*overflow-x: visible;*/

          width: 100%;
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;

          li {
            /*float: left;*/
            width: 193px;
            height: 150px;
            margin: 0 0 -1px -1px;
            position: relative;
            border: 1px solid #eee;
            z-index: 0;

            .popover {
              position: absolute;
              width: 340px;
              // height: 280px;
              top: -40px;
              left: 200px;
              border: 1px solid #ccc;
              border-radius: 2%;
              background-color: #fff;
              z-index: 55;
              // overflow: hidden;
              h5 {
                height: 30px;
              }

              .el-table {
                width: 95%;
                margin: 0 auto;
                margin-bottom: 20px;
              }

            }

            .gezi {
              width: 100%;
              height: 100%;
              border-radius: 5px;

              .gridname {
                display: inline-block;
                width: 100%;
                text-align: center;
                line-height: 50px;
              }

              .code {
                display: inline-block;
                font-size: 12px;
                width: 100%;
                height: 25px;
                margin-left: 5px;
              }
            }

          }

          li:hover {
            z-index: 1;
          }
        }
      }
    }

    .right {
      float: right;
      width: 31%;
      height: 809px;
      border: 1px solid #eee;

      h4 {
        font-size: 14px;
        font-weight: 600;
        padding: 17px 0 0 22px;
        height: 50px;
      }

      div {
        width: 92%;
        margin: 0 auto;
        border: 1px solid #eee;
        border-bottom: none;
      }
    }
  }

  .biaoge {
    width: 301px;
    //   height: 200px;
    margin: 0 auto;

    .biaotou {
      float: left;
      // height:200px;
      width: 100px;

      td {
        border: 2px solid #ccc;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        height: 40px;
      }

      // border: 1px solid #ccc;
    }

    .neirong {
      float: left;
      // height: 200px;
      width: 200px;

      td {
        text-align: center;
        border: 2px solid #ccc;
        border-left: none;
        font-size: 15px;
        height: 40px;
        //  font-weight: 600;
      }
    }
  }

  .tiaoxingma {
    margin-left: 70px;
    margin-top: 20px;
  }

  .anniu1 {
    margin-left: 140px;
    width: 150px;
  }

  .statusTypeSkinA {
    background-color: #fff;
  }

  .statusTypeSkinB {
    background-color: #0095FF;
    color: #fff;
  }

  .statusTypeSkinC {
    background-color: #F1022F;
    color: #fff;
  }
</style>
